<template>
	<view class="content">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="s in swiper" :key="s.targetId">
							<image :src="s.imageUrl" class="img"></image>
							<!-- <view class="swiper-item uni-bg-red">A</view> -->
						</swiper-item>
						<!-- <swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item> -->
					</swiper>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-bar flex-box">
						<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
							<image :src="'/static/image/index/t_' + (index + 1) + '.png'" class="img"></image>
							<view>{{item.name}}</view>
							<!-- //每日推荐对应的日期,v-if="index == 0" 列表索引的第一个item才生效 -->
							<!-- <view v-if="index == 0" class="date">{{curDate}}</view> -->
						</view>
				</view>
		</view>
		<view class="song-list-box">
			<songList
			    title="推荐歌单1"
			    link="/pages/songSquare/index?limit=30"
			    :list="recommendSongs"
			  />
			  <!-- 歌单分类块 页面代码渲染 -->
			  <view class="song-list">
			    <view class="tit-bar">
			      推荐歌单2
			      <view class="more fr">歌单广场</view>
			    </view>
			    <scroll-view class="scroll-view" scroll-x>
			      <view class="item" v-for="(item, index) in recommendSongs" :key="index">
			        <image class="img" :src="item.picUrl + $imgSuffix"></image>
			        <view class="desc ellipsis">{{ item.name }}</view>
			        <view class="count"> {{ item.playCount }}</view>
			      </view>
			    </scroll-view>
			  </view>  
		</view>
	</view>
</template>

<script>
	import songList from "../../components/songList";
	export default {
		components:{
			songList
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiper: [], 
				loading: false,
				contentBar: [
				{
					name: "每日推荐"
				},
				{
					name: "歌单"
				},
				{
					name: "排行榜"
				},
				{
					name: "电台"
				},
				{
					name: "直播"
				}],
				recommendSongs:[]
			}
		},
		onLoad() {
			this.getBanner();
			this.getRecommendSongs()
		},
		methods: {
			getBanner() { 
				//正在加载状态 
				this.loading = true 
				uni.request({ 
					url:'http://localhost:3000/banner', 
					method: 'GET', 
					data: {}, 
					success: res => {
						this.swiper = res.data.banners 
						console.log(this.swiper,'swiper')
					}, 
					complete: () => { 
						// 加载完成状态 
						this.loading= false 
					} ,
				}); 
			},
			getRecommendSongs() {
				const params = {
					limit: 6
				};
				uni.request({
					url:'http://localhost:3000/personalized', 
					method: 'GET', 
					data: params, 
					success: res => {
						const formatCount = data => {
							let tempNum = data;
							if (data > 100000) {
								tempNum = parseInt(data / 10000) + '万';
							}
						
							return tempNum;
						};
						this.recommendSongs = res.data.result;
						this.recommendSongs.forEach(item => {
							item.playCount = formatCount(item.playCount);
						});
					}, 
					complete: () => { 
						// 加载完成状态 
					} ,
				}); 
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-margin-wrap {
			width:690rpx;
			width: 100%;;
		}
		.swiper {
			height: 300rpx;
		}
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
	
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
	
		.uni-common-mt{
			margin-top:60rpx;
			position:relative;
		}
	
		.info {
			position: absolute;
			right:20rpx;
		}
	
	    .uni-padding-wrap {
	        width:550rpx;
	        padding:0 100rpx;
	    }
		
		/* 背景色 */
		.uni-bg-red{
			background:#F76260; color:#FFF;
		}
		.uni-bg-green{
			background:#09BB07; color:#FFF;
		}
		.uni-bg-blue{
			background:#007AFF; color:#FFF;
		}
		.main{
			width: 100%;
			margin-top: 30rpx;
			.main-bar {
				display: flex;
				justify-content: space-around;
				padding-bottom:22rpx; 
				text-align:center; 
				line-height: 70rpx; 
				color:#666; 
				border-bottom:1rpx solid #e6e6e6; 
				.img {
					display: block; 
					width: 92rpx; 
					height: 92rpx; 
					margin: 0 auto; 
				} 
			}
		}
		.song-list {
			padding-left: 32rpx;
		}
	// 	.song-list {
	// 		padding-left: 32rpx;

	// 		.tit-bar {
	// 			font-size: 34rpx;
	// 			font-weight: 600;
	// 			line-height: 110rpx;
	// 		}

	// 		.more {
	// 			width: 150rpx;
	// 			height: 50rpx;
	// 			line-height: 50rpx;
	// 			text-align: center;
	// 			margin-top: 30rpx;
	// 			margin-right: 32rpx;
	// 			color: #333;
	// 			font-weight: 400;
	// 			font-size: 24rpx;
	// 			border: 2rpx solid #e6e6e6;
	// 			border-radius: 50rpx;
	// 		}

	// 		.switch-line {
	// 			justify-content: space-between;
	// 			color: #999;

	// 			.flex-box {
	// 				line-height: 110rpx;
	// 				width: 300rpx;
	// 			}

	// 			.switch-item {
	// 				font-weight: 600;

	// 				&:first-child {
	// 					width: 80rpx;
	// 				}

	// 				&:last-child {
	// 					padding-left: 22rpx;
	// 				}

	// 				&.on {
	// 					color: #333;
	// 					font-size: 34rpx;
	// 				}
	// 			}
	// 		}

	// 		.scroll-view {
	// 			width: 100%;
	// 			white-space: nowrap;
	// 		}

	// 		.item {
	// 			position: relative;
	// 			display: inline-block;
	// 			width: 218rpx;
	// 			padding-bottom: 16rpx;
	// 			margin-right: 16rpx;
	// 			line-height: 34rpx;

	// 			&:before {
	// 				content: ' ';
	// 				position: absolute;
	// 				left: 0;
	// 				top: 0;
	// 				width: 100%;
	// 				height: 40rpx;
	// 				z-index: 2;
	// 				background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
	// 			}

	// 			&.video {
	// 				width: 450rpx;
	// 			}

	// 			.img {
	// 				display: block;
	// 				width: 100%;
	// 				height: 218rpx;
	// 				margin-bottom: 16rpx;
	// 				background: #eee;
	// 				border-radius: 10rpx;
	// 			}
	// 		}

	// 		.count {
	// 			position: absolute;
	// 			top: 0;
	// 			right: 0;
	// 			padding-left: 25rpx;
	// 			line-height: 34rpx;
	// 			color: #fff;
	// 			font-size: 24rpx;
	// 			z-index: 10;
	// 			background: url() no-repeat;
	// 			background-size: 25rpx 25rpx;
	// 			transform: scale(0.8);
	// 		}
	// }
</style>
